<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>写文章</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}"/>
    <link rel="stylesheet" th:href="@{/css/app.css}"/>
</head>
<body>
    <div class="z-content">
        <div class="z-card">
            <div class="z-card-body">
                <div class="z-tabs z-tabs-easy">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#basic" data-toggle="tab" aria-expanded="true">前台设置</a></li>
                        <li><a href="#admin" data-toggle="tab" aria-expanded="true">后台设置</a></li>
                        <li><a href="#storage" data-toggle="tab" aria-expanded="false">存储设置</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="basic" class="tab-pane active">
                            <form id="siteForm" class="form-horizontal">
                                <div class="box-body">
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">网站域名：</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input th:value="${config.SITE_HOST}" type="text" class="form-control" name="SITE_HOST" require="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">CDN域名：</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input th:value="${config.SITE_CDN}" type="text" class="form-control" name="SITE_HOST" require="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">网站名称：</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input th:value="${config.SITE_NAME}" type="text" class="form-control" name="SITE_NAME" require="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">网站图标:</label>
                                        <div class="col-md-5 col-sm-8">
                                            <div class="input-group">
                                                <input th:value="${config.SITE_ICON}" type="text" name="SITE_ICON" class="form-control" require="">
                                                <span class="input-group-btn">
                                                      <button type="button" class="btn btn-success btn-flat uploader">上传</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">网站Logo:</label>
                                        <div class="col-md-5 col-sm-8">
                                            <div class="input-group">
                                                <input th:value="${config.SITE_LOGO}" type="text" name="SITE_LOGO" class="form-control" require="">
                                                <span class="input-group-btn">
                                                      <button type="button" class="btn btn-success btn-flat uploader">上传</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">网站关键字：</label>
                                        <div class="col-md-5 col-sm-8">
                                            <textarea th:text="${config.SITE_KWD}" rows="2" type="text" class="form-control" name="SITE_KWD" require="">
                                            </textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">网站描述：</label>
                                        <div class="col-md-5 col-sm-8">
                                            <textarea th:text="${config.SITE_DESC}" rows="2" type="text" class="form-control" name="SITE_DESC" require="">
                                            </textarea>
                                        </div>
                                    </div>
                                    <button type="button" id="saveBasic" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>
                        <div id="admin" class="tab-pane">
                            <form id="adminForm" class="form-horizontal">
                                <div class="box-body">
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">后台标题：</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input th:value="${config.ADMIN_SITE_NAME}" type="text" class="form-control" name="ADMIN_SITE_NAME" require="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">后台Logo:</label>
                                        <div class="col-md-5 col-sm-8">
                                            <div class="input-group">
                                                <input th:value="${config.ADMIN_SITE_LOGO}" type="text" name="ADMIN_SITE_LOGO" class="form-control" require="">
                                                <span class="input-group-btn">
                                                      <button type="button" class="btn btn-success btn-flat uploader">上传</button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3 control-label">编辑器类型：</label>
                                        <div class="col-md-5 col-sm-8">
                                            <select name="EDITOR_TYPE"  class="form-control">
                                                <option value="1" th:selected="${config.EDITOR_TYPE=='1'}">wangEditor</option>
                                                <option value="2" th:selected="${config.EDITOR_TYPE=='2'}">markdown</option>
                                            </select>
                                        </div>
                                    </div>
                                    <button type="button" id="saveAdmin" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>
                        <div id="storage" class="tab-pane">
                            <form class="form-horizontal" id="storageForm" method = 'post' th:action="@{/upload/saveConfig}">
                                <div class="form-group">
                                    <label class="col-lg-2 col-sm-3 control-label">存储类型:</label>
                                    <div class="col-md-5 col-sm-8">
                                        <div class="z-radio">
                                            <input type="radio" th:field="*{cloudStorageConfig.type}" name="type" value="0" require=""/>
                                            <label><i></i>本地</label>
                                        </div>
                                        <div class="z-radio">
                                            <input type="radio" th:field="*{cloudStorageConfig.type}" name="type" value="1" require=""/>
                                            <label><i></i>七牛云</label>
                                        </div>
                                        <div class="z-radio">
                                            <input type="radio" th:field="*{cloudStorageConfig.type}" name="type" value="2" require=""/>
                                            <label><i></i>阿里云</label>
                                        </div>
                                        <div class="z-radio">
                                            <input type="radio" th:field="*{cloudStorageConfig.type}" name="type" value="3" require=""/>
                                            <label><i></i>腾讯云</label>
                                        </div>
                                    </div>
                                </div>
                                <div id="local-form" th:class="${cloudStorageConfig.type==0?'':'display-none'}">
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">文件服务器域名:</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.localDomain}" name="localDomain" placeholder="本地文件服务器域名"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">本地文件存储路径:</div>
                                        <div class="col-md-5 col-sm-8  control-label">
                                            文件将保存在工作空间workDir的file下, <span class="text-danger">[[${workDir}]]file</span>
                                        </div>
                                    </div>
                                </div>
                                <div id="qiniu-form" th:class="${cloudStorageConfig.type==1?'':'display-none'}">
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3  control-label">域名 :</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qiniuDomain}" name="qiniuDomain" require="必填项"  placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3  control-label">路径前缀 :</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qiniuPrefix}" name="qiniuPrefix" require="必填项"  placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3  control-label">AccessKey :</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qiniuAccessKey}" name="qiniuAccessKey" require="必填项"  placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3  control-label">SecretKey :</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qiniuSecretKey}" name="qiniuSecretKey" require="必填项"  placeholder="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-2 col-sm-3  control-label">BucketName :</label>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qiniuBucketName}" name="qiniuBucketName" require="必填项"  placeholder="">
                                        </div>
                                    </div>
                                </div>
                                <div id="ali-form" th:class="${cloudStorageConfig.type==2?'':'display-none'}">
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">域名</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.aliyunDomain}" name="aliyunDomain" placeholder="阿里云绑定的域名"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">路径前缀</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.aliyunPrefix}" name="aliyunPrefix" placeholder="不设置默认为空"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">EndPoint</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.aliyunEndPoint}" name="aliyunEndPoint" placeholder="阿里云EndPoint"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">AccessKeyId</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.aliyunAccessKeyId}" name="aliyunAccessKeyId" placeholder="阿里云AccessKeyId"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">AccessKeySecret</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.aliyunAccessKeySecret}" name="aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">BucketName</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.aliyunBucketName}" name="aliyunBucketName" placeholder="阿里云BucketName"/>
                                        </div>
                                    </div>
                                </div>
                                <div id="qcloud-form" th:class="${cloudStorageConfig.type==3?'':'display-none'}">
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">域名</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qcloudDomain}" name="qcloudDomain" placeholder="腾讯云绑定的域名"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">路径前缀</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qcloudPrefix}" name="qcloudPrefix" placeholder="不设置默认为空"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">SecretId</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qcloudSecretId}" name="qcloudSecretId" placeholder="腾讯云SecretId"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">SecretKey</div>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qcloudSecretKey}" name="qcloudSecretKey" placeholder="腾讯云SecretKey"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">BucketName</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qcloudBucketName}" name="qcloudBucketName" placeholder="腾讯云BucketName"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-lg-2 col-sm-3  control-label">Bucket所属地区</div>
                                        <div class="col-md-5 col-sm-8">
                                            <input type="text" class="form-control" th:value="${cloudStorageConfig.qcloudRegion}" name="qcloudRegion" placeholder="如：sh（可选值 ，华南：gz 华北：tj 华东：sh）"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-8">
                                        <button id="saveStorage" type="button" class="btn btn-primary">启用</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/app.js}"></script>
    <script type="text/javascript">
        $(function () {
            App.initSelect("select");
            App.initUploader({
                pick: '.uploader',
                url:'/upload/upload',
                accept:'jpg,png',
                before:function(){
                    App.mask(".uploader");
                },
                onSuccess:function(picker,data){
                    App.unmask(".uploader");
                    if(data.status===200){
                        $(picker).parent().prev().val(data.url);
                    }
                }
            });
            $("#saveBasic").on('click',function () {
                if(App.validate("#siteForm")){
                    App.mask("#saveBasic");
                    App.postAjax("/admin/config/save",$("#siteForm").serialize(),function (data) {
                        App.unmask("#saveBasic");
                        if(data.status===200){
                            App.msgS(data.msg);
                        }else{
                            App.msgE(data.msg);
                        }
                    })
                }
            });

            $("#saveAdmin").on('click',function () {
                if(App.validate("#adminForm")){
                    App.mask("#saveAdmin");
                    App.postAjax("/admin/config/save",$("#adminForm").serialize(),function (data) {
                        App.unmask("#saveAdmin");
                        if(data.status===200){
                            App.msgS(data.msg);
                        }else{
                            App.msgE(data.msg);
                        }
                    })
                }
            });

            $("#saveStorage").on('click', function () {
                App.unmask("#saveStorage");
                App.postAjax("/admin/config/save/storage",$("#storageForm").serialize(),function (data) {
                    App.unmask("#saveStorage");
                    if(data.status===200){
                        App.msgS(data.msg);
                    }else{
                        App.msgE(data.msg);
                    }
                })
            });
            $("input[name=type]").on('change', function() {
                var ossType = $(this).val();
                if(ossType==="0"){
                    $("#local-form").show();
                    $("#qiniu-form").hide();
                    $("#ali-form").hide();
                    $("#qcloud-form").hide();
                }else if(ossType==="1"){
                    $("#local-form").hide();
                    $("#qiniu-form").show();
                    $("#ali-form").hide();
                    $("#qcloud-form").hide();
                }else if(ossType==="2"){
                    $("#local-form").hide();
                    $("#qiniu-form").hide();
                    $("#ali-form").show();
                    $("#qcloud-form").hide();
                }else if(ossType==="3"){
                    $("#local-form").hide();
                    $("#qiniu-form").hide();
                    $("#ali-form").hide();
                    $("#qcloud-form").show();
                }
            });
        });
    </script>
</body>
</html>